<template>
  <div id="app">
    <flexbox>
      <flexbox-item v-for="(item, index) in goods"  :key="index">
        <div @click="toggle(item.path, index)">
          <div  class="flex-demo" :class="{'active':index ==checkindex }">
            <!-- <x-icon type="ios-arrow-up" class="icon-red"></x-icon> -->
            <!-- <i :class="item.ios"></i> -->
            <img :src='item.ios'>
            <!-- <x-icon type="ios-heart" size="15"></x-icon> -->
            <!-- <x-icon type="ios-heart" size="20"></x-icon> -->
            <span>{{item.name}}</span>
          </div>
        </div>
        </flexbox-item>
    </flexbox>
    <router-view></router-view>
  </div>
</template>

<script>
import axios from 'axios'
import {gcj02tobd09} from './assets/position';

export default {
  name: 'App',
  data () {
    return {
      checkindex: 0,
      reload: true,
      ios: 'ios-heart-outline',
      goods: [
        {
          name: '区域监管',
          path: '/',
          ios: '../static/home.png'
        },
         {
          name: '车辆追踪',
          path: '/carsearch',
          ios: '../static/car.png'
        },
         {
          name: '人员追踪',
          path: '/person',
          ios: '../static/person.png'
        }
      ]
    }
  },
  watch: {
    $route(to, from) {
      if (to.path === '/') {
        this.checkindex = 0;
      }
      if (to.path === '/carsearch') {
        this.checkindex = 1;
      }
      if (to.path === '/person') {
        this.checkindex = 2;
      }
    }
  },
  created () {
    // axios.get('/wxapp/getUrl/get_jsapi_ticket.jhtml', {
    //   params: {
    //     url: location.href.split('#')[0]
    //   }
    // }).then((res) => {
    //   let datas = res.data.split('#');
    //   // datas.split('#'));
    //   // console.log(datas[1]);
    //   let result = /\w+$/.exec(datas[0]);
    //   let result2 = /\w+$/.exec(datas[1]);
    //   // console.log(datas[2]);
    //   let result3 = datas[2].substr(9)
    //   let result4 = +result2;    
    //   this.$wechat.config({
    //     beta: true,
    //     debug: false,
    //     appId: 'wx3f0ed665e00a9e0b',
    //     timestamp: result4,
    //     nonceStr: result3,
    //     signature: result[0],
    //     jsApiList: ['getLocation']
    //   });
    // })
  }, 
  mounted () {
    if (this.$route.path === '/') {
      this.checkindex = 0;
    }
    if (this.$route.path === '/carsearch') {
      this.checkindex = 1;
    }
    if (this.$route.path === '/person') {
      this.checkindex = 2;
    }
    // window.addEventListener("popstate", (e) => {
    //   if (window.location.pathn  ame === '/') {
    //     this.checkindex = 0;
    //   }
    //   if (window.location.pathname === '/carsearch') {
    //     this.checkindex = 1;
    //   }
    //   if (window.location.pathname === '/person') {
    //     this.checkindex = 2;
    //   }
    //   // alert("我监听到了浏览器的返回按钮事件啦"); // 根据自己的需求实现自己的功能
    // }, false);
  },
  methods: {
    toggle (path, index) {
      this.checkindex = index;
      this.$router.push({
        path: path
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* margin-top: 60px; */
}
a {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.vux-flex-row {
    position: absolute;
    bottom: 0;
    z-index: 99;
    /* background-color: rgba(0,0,0, .1); */
    background: #ddd;
    /* margin-top: 91px; */
    height: 50px;
    color: #000;
    border-top: 1px solid #ccc;
}
.vux-flexbox .vux-flexbox-item {
  text-align: center;
  font-size: 14px;
}
.flex-demo {
  /* padding: 2px; */
  height: 50px;
  line-height: 40px;
  position: relative;

}
.flex-demo p {
  margin: 0;
  color: #000;
  display: block;
  /* line-height: 69px; */
  padding-top: 15px;
  text-align: center;
}
.flex-demo img {
  position: absolute;
  left: 44px;
  top: 8px;
  /* margin-bottom: 4px; */
  /* margin-right: 10px; */
}
.flex-demo span {
  position: absolute;
  top:18px;
  left: 25px;;
}
.vux-flexbox-item a {
  text-decoration: none;
}
 /* .vux-x-icon {
  fill: blue;
}  */
.fa-fw {
  padding: 8px;
  position: absolute;
  left: 42px;
  top: 0px;
}
.active i {
  color: blue;
}
.active span {
  color: blue;
}
</style>
